{% extends "base.html" %}

{% block content %}

<div id="bm-create-form" class="">

	{% if error %}
		<div class="alert alert-danger" role="alert">Sorry, we couldn't create your box. {{error}}</div>
	{% endif %}

  	<form method="POST" action="/" class="form-horizontal" role="form">

        <div class="row">
            <label class="col-sm-3 bm-control-label" for="units">Units</label>
            <div class="col-sm-6">
                <select name="units" id="bm-units" class="form-control" aria-label="Units">
                    <option value="in" selected>inches</option>
                    <option value="mm">millimeters</option>
                    <option value="cm">centimeters</option>
                </select>
            </div>
        </div>

        <div class="row">
            <label class="col-sm-3 bm-control-label">Dimensions</label>
            <div class="col-sm-9">
                <input class="form-control" type="text" name="width" value="4" aria-label="width"/> x
                <input class="form-control" type="text" name="depth" value="5" aria-label="depth"/> x
                <input class="form-control" type="text" name="height" value="6" aria-label="height"/>
                &nbsp;
                <span class="glyphicon glyphicon-question-sign bm-btn-popover" data-toggle="popover" data-content="The width x depth x height of your box (outer dimension)."></span>
            </div>
        </div>

        <div class="row">
            <label class="col-sm-3 bm-control-label">Material Thickness</label>
            <div class="col-sm-9">
                <input class="form-control" type="text" name="material_thickness" id="bm-material_thickness" value="0.1875" aria-label="Material Thickness">
                &nbsp;
                <span class="glyphicon glyphicon-question-sign bm-btn-popover" data-toggle="popover" data-content="The thickness of the material (needed in order to properly size the notches)."></span>
            </div>
        </div>

        <div class="row">
            <label class="col-sm-3 bm-control-label">File Type</label>
            <div class="col-sm-6">
                <select name="file_type" id="bm-filetype" class="form-control" aria-label="File Type">
                  <option value="pdf" selected>pdf</option>
                  <option value="dxf">dxf</option>
                  <option value="svg">svg</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="offset-sm-3 col-sm-9">
                <span id="bm-advanced">[ <a href="#" onClick="$('#bm-create-advanced').toggle();return false;">advanced options</a> ]</span>
            </div>
        </div>

        <div id="bm-create-advanced" style="display:none">

            <div class="row">
                <label class="col-sm-3 bm-control-label">Notch Length</label>
                <div class="col-sm-9">
                    <input class="form-control" type="text" name="notch_length" id="bm-notch_length" value="0.46875" aria-label="Notch Length"/>
                    <label>
                        <input type="checkbox" name="auto" value="" id="bm-auto" checked aria-label="Auto-compute Notch Length"/>
                        Auto
                    </label>
                    &nbsp;
                    <span class="glyphicon glyphicon-question-sign bm-btn-popover" data-toggle="popover" data-content="The length of each notch. If you don't care, just leave the auto checkbox as is.  A good
                    general rule is two or three times the material depth. Note that this parameter is used
                    as a suggestion only - the program will adjust the notch length so that the geometry of
                    the box comes out correctly."></span>
                </div>
            </div>

            <div class="row">
                <label class="col-sm-3 bm-control-label">Cut Width</label>
                <div class="col-sm-9">
                    <input class="form-control" type="text" name="cut_width" value="0" aria-label="Cut Width"/>
                    &nbsp;
                    <span class="glyphicon glyphicon-question-sign bm-btn-popover" data-toggle="popover" data-content="The width of material removed by the laser. We assume that the beam cuts symmetrically
                    around the cutting line but that it has some finite width. For example, if a non-zero cut
                    width is specified, the notches will be slightly exaggerated so that the notches fit more
                    snugly together. A value of zero is usually safe but loose-fitting. The cut width must be
                    experimentally determined, as it is a function of the material, laser speed/power parameters,
                    etc. Reasonable values for 1/8 inch acrylic are .004 inches to .008 inches. If the cut width is
                    set too large, the box will not fit together snugly."></span>
                </div>
            </div>

            <div class="row">
                <label class="col-sm-3 bm-control-label">Bounding Box</label>
                <div class="col-sm-9">
                    <label>
                      <input type="checkbox" name="bounding_box" aria-label="Bounding Box"/> Draw bounding box
                    </label>
                    &nbsp;
                    <span class="glyphicon glyphicon-question-sign bm-btn-popover" data-toggle="popover" data-content="Having problems with DXF imports?  Choose to add a bounding box around the whole box design
                    and then you can size the entire thing correctly once you import it."></span>
                </div>
            </div>

            <div class="row">
                <label class="col-sm-3 bm-control-label">Include Cover</label>
                <div class="col-sm-6">
                    <select name="notched_top" id="bm-notched-top" class="form-control" aria-label="Include Cover?">
                        <option value="1" selected>Yes, include a notched box cover</option>
                        <option value="0">No, don't include a cover piece (sides will be flat on top)</option>
                    </select>
                </div>
            </div>

      </div>

        <div class="row">
            <div class="offset-sm-3 col-sm-9">
                <input type="submit" class="btn btn-light" value="Design It!">
            </div>
        </div>

  	</form>

</div>

{% endblock %}
